<template>
    <div class="phone-wrap">
        <Transition mode="out-in" name="el-fade-in-linear">
            <activity-phone
                v-show="props.phonePreviewIndex === 0"
                ref="activityGroupFissionPhoneRef"
                :show-header="false"
                class="activity-h5-phone"
                width="375px"
                scroll-height="78vh"
                :scale="300 / 375">
                <div v-if="props.phonePreviewIndex === 0" class="activity-phone-main-body">
                    <div class="nav-bar-fixed">
                        <div class="nav-bar">
                            <img src="@/assets/smartMarketing/community/icon_09.png" alt="" />
                        </div>
                        <div class="activity-title">
                            <div class="title-back-icon">
                                <img src="@/assets/smartMarketing/community/icon_07.png" alt="" />
                            </div>
                            <div class="title-name">打卡详情</div>
                            <div class="title-right-icon">
                                <img src="@/assets/smartMarketing/community/icon_08.png" alt="" />
                            </div>
                        </div>
                    </div>
                    <div class="base-box">
                        <div class="base-title">
                            <div class="base-title-name" :class="{ 'base-title-name-padding': phoneInfo.description }">
                                <div class="name">{{ phoneInfo.activity_name || '活动名称' }}<span>进行中</span></div>
                            </div>
                            <div v-show="phoneInfo.description" class="base-rules">活动说明</div>
                        </div>
                        <div class="base-cell">
                            <div class="cell-label">参与人数：</div>
                            <div class="cell-text">100</div>
                        </div>
                        <div class="base-cell">
                            <div class="cell-label">活动时间：</div>
                            <div v-if="phoneInfo.period_type == 2" class="cell-text">
                                {{ timeFormat(phoneInfo.activity_time?.[0]) }} -
                                {{ timeFormat(phoneInfo.activity_time?.[1]) }}
                            </div>
                            <div v-else class="cell-text">永久</div>
                        </div>
                        <div class="base-cell">
                            <div class="cell-label">打卡时间：</div>
                            <div class="cell-text cell-text-time">
                                每日<span
                                    v-for="(item, index) in phoneInfo.clock_time_range"
                                    v-show="item?.length"
                                    :key="index">
                                    {{ item?.[0] }} -
                                    {{ item?.[1] }}
                                    {{ index + 1 != phoneInfo.clock_time_range?.length ? '、' : '' }}
                                </span>
                            </div>
                        </div>
                        <div class="base-cell">
                            <div class="cell-label">打卡群聊：</div>
                            <div v-if="phoneInfo.clock_groupchat == 1" class="cell-text">全部群聊</div>
                            <div v-else class="cell-text cell-text-group">
                                <div class="cell-text-group-text">{{ groupchatTextView }}</div>
                                <div class="cell-text-group-num">共{{ groupListNum }}个群聊</div>
                            </div>
                        </div>
                    </div>
                    <div class="card-box">
                        <div class="box-title">我的打卡记录</div>
                        <div class="calendar-title">
                            <img src="@/assets/smartMarketing/community/icon_02.png" alt="" />
                            <span>{{ yearsMonth }}</span>
                            <img src="@/assets/smartMarketing/community/icon_03.png" alt="" />
                        </div>
                        <div class="calendar-info">
                            <div class="list">
                                <div v-for="(item, index) in daysList" :key="index">
                                    <div class="week">{{ item.week }}</div>
                                    <div
                                        class="day"
                                        :class="{
                                            'day-in': index == 1,
                                            'day-out': index == 2,
                                            'day-now': index == 3
                                        }">
                                        {{ index == 3 ? '今' : item.day }}
                                    </div>
                                    <div class="icon-img">
                                        <img
                                            v-if="index == 1"
                                            src="@/assets/smartMarketing/community/icon_04.png"
                                            alt="" />
                                        <!-- <img
                                            v-if="index == toDayBefore(1)"
                                            src="@/assets/smartMarketing/community/icon_05.png"
                                            alt="" /> -->
                                    </div>
                                </div>
                            </div>
                            <div class="calendar-bottom">
                                <span>展开日历</span>
                                <img src="@/assets/smartMarketing/community/icon_06.png" alt="" />
                            </div>
                        </div>
                        <div class="desc-title">今日未打卡</div>
                        <div class="desc">快在打卡时间内去群里完成打卡吧！</div>
                    </div>
                    <div class="card-box">
                        <div class="box-title">打卡任务</div>
                        <div class="task-item">
                            <div class="item-label">
                                <div class="item-label-title">每日打卡，奖励{{ phoneInfo.points_num }}积分</div>
                                <div class="item-label-desc">进度 0/1</div>
                            </div>
                            <div class="item-btn"><span>未完成</span></div>
                        </div>
                    </div>
                </div>
            </activity-phone>
        </Transition>
        <Transition mode="out-in" name="el-fade-in-linear">
            <phone-preview
                v-show="props.phonePreviewIndex === 1"
                re-key="scriptWelcome"
                :is-group-chat="true"
                :scale="300 / 320"
                class="activit-phone-welcome-preview" />
        </Transition>
        <div class="change-phone-index">
            <div :class="{ disabled: phonePreviewIndex <= 0 }" @click="changePhonePreviewIndex('up')">
                <img src="@/assets/phonePreview/activityPhonePreview/groupFission/up.png" />
            </div>
            <div :class="{ disabled: phonePreviewIndex >= 1 }" @click="changePhonePreviewIndex('down')">
                <img src="@/assets/phonePreview/activityPhonePreview/groupFission/down.png" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import activityPhone from '@/components/zw/phonePreview1.0/activityPhonePreview/index.vue';
import phonePreview from '@/components/zw/phonePreview1.0/welcomePhonePreview/materialPreview/index.vue';
import { ref, reactive, onMounted, computed } from 'vue';
import dayjs from 'dayjs';

const emit = defineEmits(['update:modelValue', 'update:phonePreviewIndex']);

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => {}
    },
    // 第三步欢迎语的样机索引
    phonePreviewIndex: {
        type: Number,
        default: 0
    }
});

const phoneInfo = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const groupListText = computed(() => {
    return phoneInfo.value.groupchat_list?.map(el => el.name).join('、') || '';
});

const groupListNum = computed(() => {
    return phoneInfo.value.groupchat_list?.length || 0;
});

const groupchatTextLength = computed(() => {
    return groupListText.value.length;
});

const groupchatTextView = computed(() => {
    const text = groupListText.value;
    if (!text) {
        return '-';
    }
    return text;
});

const yearsMonth = ref<any>(dayjs().format('YYYY月MM日'));
const today = ref<any>(dayjs().format('DD'));

const daysList = reactive([
    { week: '日', day: 30 },
    { week: '一', day: 31 },
    { week: '二', day: '01' },
    { week: '三', day: '02' },
    { week: '四', day: '03' },
    { week: '五', day: '04' },
    { week: '六', day: '05' }
]);

const changePhonePreviewIndex = (changeType: 'up' | 'down') => {
    if (changeType === 'up') {
        emit('update:phonePreviewIndex', props.phonePreviewIndex - 1 < 0 ? 0 : props.phonePreviewIndex - 1);
    } else {
        emit('update:phonePreviewIndex', props.phonePreviewIndex + 1 > 1 ? 1 : props.phonePreviewIndex + 1);
    }
};

const toDayBefore = (index: number) => {
    const idx = daysList.findIndex((el: any) => el.day == today.value);
    const beforeIndex = idx - index;
    return beforeIndex;
};

const timeFormat = (time: any) => {
    if (!time) return '';
    return dayjs(time).format('YYYY.MM.DD');
};

const initDate = () => {
    const oneDayTime = 24 * 60 * 60 * 1000;
    const time: any = dayjs().endOf('week');
    daysList.map((el: any, index) => {
        el.day = dayjs(time - (6 - index) * oneDayTime).format('DD');
    });
};

onMounted(() => {
    // initDate();
});
</script>

<style lang="scss" scoped>
// 样机样式

.activity-h5-phone {
    position: absolute;
    margin: -42px 30px 0 16px;

    .el-scrollbar__view {
        padding-top: 44px;
    }
}

// 解决海报样机的问题
.phone-wrap {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    padding-top: 30px;
}

.activit-phone-welcome-preview,
.poster-phone {
    position: absolute;
    margin-right: 30px;
}

.change-phone-index {
    position: absolute;
    top: 48%;
    right: 30px;
    width: 40px;
    height: 80px;
    user-select: none;
    text-align: center;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 2px 8px 0 #e5e5e5;
    line-height: 40px;
    transform: translateY(-50%);

    > div {
        width: 40px;
        height: 40px;
        cursor: pointer;

        &.disabled {
            cursor: not-allowed;
            background-color: var(--el-disabled-bg-color);
        }
    }

    img {
        width: 16px;
        height: 16px;
    }
}

// 滚动切换的动画
.slide-enter-active {
    animation: bounce-in 0.5s;
}

.slide-leave-active {
    animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

.activity-phone-main-body {
    background: url('@/assets/smartMarketing/community/bg_02.png') no-repeat;
    background-size: 100% 490px;

    .nav-bar-fixed {
        // position: absolute;
        // top: 0;
        // left: 0;
        // right: 0;
    }

    .nav-bar {
        padding: 13px 18px 12px 25px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .activity-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #fff;
        line-height: 25px;

        .title-back-icon {
            margin-left: 15px;
            width: 6px;
            height: 12px;
        }

        .title-right-icon {
            margin-right: 12px;
            width: 75px;
            height: 27px;
        }

        .title-name {
            padding-left: 20px;
        }

        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    .base-box {
        .base-title {
            padding-top: 20px;
            padding-bottom: 10px;
            margin-left: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .base-title-name {
                font-size: 20px;
                font-family: PingFangSC-Semibold, 'PingFang SC';
                font-weight: 600;
                color: #fff;
                line-height: 28px;

                .name {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    white-space: normal;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                span {
                    margin-left: 8px;
                    display: inline-block;
                    width: 50px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, 'PingFang SC';
                    font-weight: 400;
                    color: #ff6b00;
                    line-height: 20px;
                    background: #fff;
                    border-radius: 10px;
                    text-align: center;
                    transform: translateY(-2px);
                }
            }

            .base-title-name-padding {
                margin-right: 66px;
            }

            .base-rules {
                position: absolute;
                top: 95px;
                right: 0;
                width: 64px;
                height: 22px;
                background: rgb(0 0 0 / 40%);
                border-radius: 11px 0 0 11px;
                font-size: 12px;
                color: #fff;
                line-height: 22px;
                text-align: center;
            }
        }

        .base-cell {
            margin: 0 16px;
            display: flex;

            // align-items: center;
            font-size: 13px;
            color: #fff;
            line-height: 20px;

            .cell-label {
                width: 65px;
                white-space: nowrap;
            }

            .cell-text-time {
                max-width: 140px;
            }

            .cell-text-group {
                display: flex;
                align-items: center;
                overflow: hidden;

                .cell-text-group-text {
                    width: 110px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }

    .box-title {
        padding: 12px 12px 11px;
        font-size: 17px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #333;
        line-height: 24px;
        border-bottom: 1px solid #f5f5f5;
    }

    .card-box {
        margin: 20px 16px 10px;
        background: #fff;
        border-radius: 12px;

        .calendar-title {
            margin: 20px 16px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                width: 12px;
                height: 12px;
            }

            span {
                font-size: 15px;
                font-family: PingFangSC-Medium, 'PingFang SC';
                font-weight: 500;
                color: #33302d;
                line-height: 21px;
            }
        }

        .calendar-info {
            margin: 0 12px;
            background: #fff8ef;
            border-radius: 8px;

            .list {
                padding: 12px 12px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                text-align: center;
                color: #666;
                font-size: 14px;
                line-height: 20px;

                .day {
                    margin: 17px 0 2px;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                }

                .day-in {
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    color: #ff6b00;
                    border-radius: 50%;
                    background: #ffe2ce;
                    box-shadow: 0 2px 6px 0 rgb(255 107 0 / 8%);
                }

                .day-out {
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    color: #fff;
                    border-radius: 50%;
                    background: #ccc;
                    box-shadow: 0 2px 6px 0 rgb(204 204 204 / 44%);
                }

                .day-now {
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    color: #fff;
                    border-radius: 50%;
                    background: #ff6b00;
                    box-shadow: 0 2px 6px 0 rgb(255 107 0 / 26%);
                }

                .icon-img {
                    margin-bottom: 6px;
                    width: 30px;
                    height: 6px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        display: block;
                        width: 9px;
                        height: 6px;
                    }
                }
            }

            .calendar-bottom {
                margin: 0 13px;
                padding: 3px 0 4px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 11px;
                color: #999;
                line-height: 12px;
                border-top: 1px solid #ffebd2;

                img {
                    margin-left: 4px;
                    width: 11px;
                    height: 6px;
                }
            }
        }

        .desc-title {
            padding: 16px 13px 0;
            font-size: 16px;
            color: #333;
            line-height: 22px;
        }

        .desc {
            padding: 8px 13px 16px;
            font-size: 14px;
            color: #999;
            line-height: 20px;
        }

        .task-item {
            padding: 16px 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;

            .item-btn {
                width: 76px;
                height: 30px;
                background: linear-gradient(90deg, rgb(255 193 81 / 30%), rgb(255 107 0 / 30%));

                // background: rgba(255, 107, 0, 0.3);
                box-shadow: 0 2px 6px 0 rgb(255 107 0 / 26%);
                border-radius: 15px;
                text-align: center;
                line-height: 30px;
                font-size: 14px;

                // opacity: 0.3;
            }

            span {
                color: #db7f3d;
            }

            .item-label-title {
                font-size: 14px;
                font-family: PingFangSC-Medium, 'PingFang SC';
                font-weight: 500;
                color: #333;
                line-height: 20px;
            }

            .item-label-desc {
                padding-top: 8px;
                font-size: 12px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #666;
                line-height: 17px;
            }
        }
    }
}
</style>
